<template>
  <el-card shadow="never">
    <div slot="header">弹窗设置</div>

    <div class="dialog--setting">
      <div class="dialog--setting__phone">
        <div class="dialog--phone__container">
          <img :src="formConfig.dialog.url" />
        </div>
      </div>

      <div class="dialog--setting__form">
        <el-form
          :model="formData"
          :rules="rules"
          ref="settingForm"
          label-width="100px"
        >
          <el-form-item label="是否开启" prop="status">
            <el-switch v-model="formConfig.dialog.status"> </el-switch>
          </el-form-item>

          <el-form-item label="图片上传" prop="image">
            <el-upload
              :action="uploadApi"
              list-type="picture-card"
              :auto-upload="true"
              :file-list="formConfig.uploadFile.list"
              name="upload"
              drag
              :limit="formConfig.uploadFile.limit"
              :on-success="onUploadChange"
              :on-exceed="onUploadExceed"
              :on-remove="onUploadRemove"
              :headers="uploadHeaders"
              :on-error="onUploadError"
              accept=".jpg,.png,.jpeg"
            >
              <i slot="default" class="el-icon-plus"></i>
              <div slot="tip" class="el-upload__tip">
                最大高度 700，最大宽度 650
              </div>
            </el-upload>
          </el-form-item>

          <el-form-item label="弹窗次数" prop="time">
            <el-radio v-model="formConfig.dialog.time" :label="0"
              >每次</el-radio
            >
            <el-radio v-model="formConfig.dialog.time" :label="1"
              >仅首次</el-radio
            >
          </el-form-item>

          <el-form-item label="按钮颜色" prop="btnColor">
            <el-color-picker
              v-model="formConfig.dialog.btnColor"
            ></el-color-picker>
          </el-form-item>

          <el-form-item label="按钮文字1" prop="btnText1">
            <el-input v-model="formConfig.dialog.btnText1"></el-input>
          </el-form-item>

          <el-form-item label="按钮文字2" prop="btnText2">
            <el-input v-model="formConfig.dialog.btnText2"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </el-card>
</template>
<script>
import { getToken } from '@/utils/auth'
const token = getToken()
const Authorization = `Bearer ${token}`

export default {
  name: 'DialogSetting',
  filters: {},
  props: {
    formData: {
      type: Object,
      default: function () {
        return {}
      },
    },
    formConfig: {
      type: Object,
      default: function () {
        return {}
      },
    },
  },
  data() {
    return {
      uploadApi: `${process.env.VUE_APP_BASE_HOST}upload/cloud`,
      uploadHeaders: {
        Authorization,
      },

      rules: {
        name: [
          { required: true, message: '请输入标题', trigger: 'blur' },
          {
            min: 5,
            max: 15,
            message: '长度在 5 到 15 个字符',
            trigger: 'blur',
          },
        ],
      },
    }
  },
  watch: {
    'formConfig.dialog': {
      handler: function (val) {
        const { status, time, btnColor, btnText1, btnText2, url } = val

        const { componentId } = this.formConfig

        this.formData.components.forEach((v) => {
          if (v.id === componentId) {
            v.status = status
            v.time = time
            v.url = url
            v.btnColor = btnColor
            v.btnText1 = btnText1
            v.btnText2 = btnText2
          }
        })
      },
      deep: true,
      immediate: true,
    },
  },
  created() {},
  methods: {
    // 文件上传添加
    onUploadChange(res) {
      const { url, filename } = res
      this.formConfig.dialog.url = url

      const { componentId } = this.formConfig

      this.formData.components.forEach((v) => {
        if (v.id === componentId) {
          v.url = url
          v.urlList = [{ name: filename, url }]
        }
      })
    },

    // 超出文件
    onUploadExceed() {
      this.$message({
        message: '抱歉，只能上传一张图片',
        type: 'error',
      })
    },

    // 移除
    onUploadRemove() {
      const { componentId } = this.formConfig
      this.formConfig.dialog.url = ''

      this.formData.components.forEach((v) => {
        if (v.id === componentId) {
          v.url = ''
          v.urlList = []
        }
      })
    },
    async onUploadError(err) {
      if (err.status) {
        this.$message({
          message: '超时，请重新登录',
          type: 'error',
        })

        await this.$store.dispatch('user/logout')
        this.$router.push(`/login?redirect=${this.$route.fullPath}`)
        return
      }

      this.$message({
        message: '上传失败，请重试',
        type: 'error',
      })
    },
  },
}
</script>
